<template>
  <div class="container-header head-form" slot="header">
    <Form class="search store-list-search">
      <Row>
        <Col span="7">
          <FormItem label="科室">
            <Select v-model="list.form.officeId" clearable filterable @on-change="setDepartment">
              <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="门店名称">
            <Input v-model.trim="list.form.storeName" placeholder="门店名称" @on-enter="onSearchBtnClick"/>
          </FormItem>
          <FormItem label="门店类型">
            <SelectList
              v-model="list.form.storeTypeId"
              listType="storeTypeList"
            />
          </FormItem>
        </Col>
        <Col span="7">
          <FormItem label="部门">
            <Select v-model="list.form.departmentId" clearable filterable @on-change="setDistribute">
              <Option v-for="(item, index) of list.departments" :key="index" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
          <!-- <FormItem label="经销商">
            <Input v-model.trim="list.form.distributorName" placeholder="联系人经销商名称" @on-enter="onSearchBtnClick"/>
          </FormItem> -->
          <FormItem label="签约品牌">
            <SelectList
              v-model="list.form.brandId"
              listType="selfList"
              :selfList="brandList"
            />
          </FormItem>
          <FormItem label="店主姓名">
            <Input v-model.trim="list.form.ownerName" placeholder="店主姓名" @on-enter="onSearchBtnClick"/>
          </FormItem>
        </Col>
        <Col span="7">
          <FormItem label="经销商">
            <Select multiple v-model="list.form.distributorIds" clearable  @on-change="onSearchBtnClick">
              <Option v-for="(item) of list.distributors" :key="item.distributorId" :value="item.distributorId">{{item.distributorName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="营业执照号">
            <Input v-model.trim="list.form.businessLicenseNo" placeholder="营业执照号" @on-enter="onSearchBtnClick"/>
          </FormItem>
          <FormItem label="门店登录手机">
            <Input v-model.trim="list.form.storePhone" placeholder="门店登录手机" @on-enter="onSearchBtnClick"/>
          </FormItem>
        </Col>
        <!-- <Col span="7">
        </Col> -->
        <Col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import SelectList from '@/components/SelectList';
  import { mapGetters } from 'vuex'
  export default {
    props: {
      list: {
        type: Object,
        default: ''
      }
    },
    data() {
      return {
        currValue: [],
        brandList: [],
        distributors: [],
        departments: []
      }
    },
    components: {
      SelectList,
    },
    mounted() {
      this.$store.dispatch('getListDepartmentTree')
      this.getBrand()
    },
    methods: {
      getBrand() {
        this.$ajaxGet('product/common/supplier_brand').then(res => {
          this.brandList = res.map(item => {
            item.value = item.brandId
            item.text = item.brandName
            return item
          })
        })
      },
      onSearchBtnClick() {
        this.$emit('onSearchBtnClick')
      },
      onAddBtnClick() {
        this.$emit('onAddBtnClick')
      },
      setDepartment(row) {
        if (!row) {
          this.list.form.officeId = {}
          this.list.form.departmentId = null
          this.list.departments = []
          this.list.form.distributorIds = []
          this.list.distributors = []
        } else {
          this.list.departments = row.children
        }
      },
      setDistribute(id) {
        this.list.form.distributorIds = []
        if (id) {
          this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
            this.list.distributors = res
          })
        } else {
          this.list.distributors = []
        }
      }
    },
    computed: {
      ...mapGetters(['reportDepart'])
    }
  }
</script>
